<script setup lang="ts">
import { approve, getDetail } from '@/api/api-manage/approve'
import useDictStore from '@/store/modules/dict'
import { ModalShowType } from '@/types/common'
import { message } from '@/utils/message'
import { ElButton, ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps<{
  modalShow: ModalShowType
  termId: number | null
  onSearch?: () => Promise<void>
}>()

const emit = defineEmits<{
  (e: 'update:modalShow', type: ModalShowType): void
}>()

const modalShow = computed({
  get() {
    return props.modalShow
  },
  set(value) {
    emit('update:modalShow', value)
  },
})
const ruleFormRef = ref<FormInstance>()
const dictStore = useDictStore()
const { api_type } = dictStore.getDicts('api_type')

const formData = ref({
  // appId: props.termId,
  applyDept: '',
  applyPerson: '',
  applyPhone: '',
  applyAddr: '',
  applyEmail: '',
  applyUseScene: '',
  searchDateRange: ['', ''],
  applyAnnex: '',
})

const loading = ref(false)

const submitForm = async (applyStatus: string) => {
  loading.value = true
  await approve({ applyId: props.termId, applyStatus })
    .then(() => {
      message('操作成功', { type: 'success' })
    })
    .finally(() => (loading.value = false))
  onClose()
}

const isFinished = ref(true)

const resetFields = () => {
  ruleFormRef.value.resetFields()
  formData.value = {
    applyDept: '',
    applyPerson: '',
    applyPhone: '',
    applyAddr: '',
    applyEmail: '',
    applyUseScene: '',
    searchDateRange: ['', ''],
    applyAnnex: '',
  }
}
const apiInfoApproveVos = ref([])

const columns: TableColumnList = [
  {
    type: 'selection',
    width: 55,
    align: 'left',
  },
  {
    label: '接口名称',
    prop: 'apiName',
    minWidth: 100,
  },
  {
    label: '接口类型',
    prop: 'apiType',
    minWidth: 100,
    formatter({ apiType }) {
      return api_type.getLabel(apiType)
    },
  },
  {
    label: '接口描述',
    prop: 'apiDesc',
    minWidth: 100,
  },
  {
    label: '操作',
    fixed: 'right',
    width: 90,
    slot: 'operation',
  },
]

function onClose() {
  if (props.modalShow === ModalShowType.Edit) {
    props.onSearch()
  }
  modalShow.value = ModalShowType.Hide
  resetFields()
}

async function onOpen() {
  loading.value = true
  const { data } = await getDetail(props.termId).finally(() => (loading.value = false))
  formData.value = data.applyInfoVo
  formData.value.searchDateRange = [
    data.applyInfoVo.applyUseTimeBegin,
    data.applyInfoVo.applyUseTimeEnd,
  ]
  apiInfoApproveVos.value = data.apiInfoApproveVos
}
</script>

<template>
  <el-drawer
    :close-on-click-modal="false"
    title="接口申请"
    class="common-dialog"
    :model-value="modalShow !== ModalShowType.Hide"
    :before-close="onClose"
    size="50%"
    @open="onOpen"
  >
    <section-info v-loading="loading">
      <template #title>申请单信息</template>
      <el-form ref="ruleFormRef" :model="formData" label-width="120px" :disabled="true">
        <el-form-item label="申请单位" prop="applyDept">
          <el-input v-model="formData.applyDept" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="申请人" prop="applyPerson">
          <el-input v-model="formData.applyPerson" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话" prop="applyPhone">
          <el-input v-model="formData.applyPhone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系地址" prop="applyAddr">
          <el-input v-model="formData.applyAddr" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="applyEmail">
          <el-input v-model="formData.applyEmail" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用场景" prop="applyUseScene">
          <el-input
            v-model="formData.applyUseScene"
            type="textarea"
            placeholder="输入内容"
            maxlength="300"
            show-word-limit
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="使用时间" prop="searchDateRange">
          <el-date-picker
            v-model="formData.searchDateRange"
            unlink-panels
            type="daterange"
            value-format="YYYY/MM/DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="文件上传" prop="applyAnnex">
          <UploadFile
            v-model:file-ids="formData.applyAnnex"
            v-model:finished="isFinished"
            :suffix="['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
            :accept="'.doc,.docx,.pdf,.jpg,.jpeg,.png'"
            :disabled="true"
            :limit="20"
            :max="100"
          />
        </el-form-item>
      </el-form>
    </section-info>
    <section-info>
      <template #title>接口相关信息</template>
      <pure-table
        border
        align-whole="center"
        showOverflowTooltip
        table-layout="auto"
        :loading="loading"
        :data="apiInfoApproveVos"
        :columns="columns"
        :header-cell-style="{
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)',
        }"
      >
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            @click="
              router.push({
                path: '/api-manage/detail',
                query: { id: row.id },
              })
            "
          >
            接口详情
          </el-button>
        </template>
      </pure-table>
    </section-info>
    <template #footer>
      <el-button v-if="modalShow === ModalShowType.View" @click="modalShow = ModalShowType.Hide">
        关闭
      </el-button>
      <template v-if="modalShow === ModalShowType.Edit">
        <el-button @click="submitForm('2')">拒绝通过</el-button>
        <el-button type="primary" @click="submitForm('1')"> 通过审核 </el-button>
      </template>
    </template>
  </el-drawer>
</template>
